<template>
  <div class="base-info" v-loading="loading">
    <div class="info">
      <el-image class="avatar" :src="userInfo.avatar"/>
      <div class="in color-info">
        <p class="font-14" style="color: #1f1f1f">{{ userInfo.name }}</p>
        <p class="font-12">备注：{{ userInfo?.groupNickname == '' ? userInfo.name : userInfo?.groupNickname }}</p>
        <p class="font-12">UID: {{ userInfo.uid }}</p>
        <p class="font-12">地区：{{ userInfo.lastLocation == null ? '-' : userInfo.lastLocation }}</p>
      </div>
    </div>

    <div class="cus-divider"></div>

    <div class="remark">
      <span class="color-info">备注</span>
      <span>漳卅</span>
    </div>
    <div class="remark">
      <span class="color-info">来源</span>
      <span>账号搜索</span>
    </div>
    <div class="cus-divider"></div>
    <div class="send color-primary">
      发消息
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, onBeforeMount, onMounted, reactive, toRefs, watch} from 'vue'
import {getUserDetail} from "/@/api/imapi";
import {Position} from "@element-plus/icons-vue";
import {useUserInfo} from "/@/stores/userInfo";
import {storeToRefs} from "pinia";

export default defineComponent({
  name: "ChatUserBaseInfo",
  components: {Position},
  props: {
    uid: {
      type: String,
      default: () => '',
    },
  },
  setup(props, {emit}) {
    const stores = useUserInfo();
    const {userInfos} = storeToRefs(stores);
    const state = reactive({
      loading: true,
      userInfo: {}
    });
    onMounted(() => {
      getUserInfo();
    });
    const getUserInfo = () => {
      if (props.uid != '' && props.uid != null) {
        state.loading = true
        getUserDetail({uid: props.uid, suid: userInfos.value.hash}).then(res => {
          state.userInfo = res.data
          state.loading = false
        })
      } else {
        state.loading = false
      }
    };
    const handleEventClose = () => {
      emit('handleClose', {})
    };
    return {
      ...toRefs(state),
      handleEventClose
    };
  }
})
</script>

<style scoped lang="scss">
.base-info {
  width: 360px;
  height: auto;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 6px;
  display: block;
  margin-top: 60px;

  .info {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: row;

    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 12px;
      margin-right: 10px;
    }

    .in {
      width: calc(100% - 70px);

      p {
        width: 100%;
        padding-bottom: 3px;
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏溢出的内容 */
        text-overflow: ellipsis; /* 显示省略号 */
      }

      p:last-child {
        padding-bottom: 0;
      }
    }
  }

  .remark {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  }

  .send {
    text-align: center;
    cursor: pointer;
  }

  .cus-divider {
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid #EFEFEF;
  }
}
</style>
